<template>
  <div>
    <nav-header :navBgColor="'#fff'" :headerTitle="'完善资料'" :isNext="true" :headerNext="'提交'" @tap2next="tap2updateInfo"></nav-header>
    <div class="nav-height"></div>
    <div class="improve-info">
      <div class="form-file" @click="chooseAvatarUrl">
        <img :src="avatarUrl+'?x-oss-process=image/resize,m_fill,h_188,w_188'" alt v-if="avatarUrl!==''"/>
        <img src="@/assets/images/head_default.png" alt v-else/>
        <!-- <input type="file" name="imagefile" id accept="image/*" multiple /> -->
      </div>
      <p class="form-file-tips">请上传头像，建议使用微信头像</p>
      <div class="form-item">
        <p class="form-item-title">设置昵称</p>
        <input
          class="form-item-content active"
          type="text"
          placeholder="建议使用微信昵称"
          v-model="nickName"
          @input="nickNameInput"
        />
      </div>
      <div class="form-item" @click.stop="tap2showAgeModel">
        <p class="form-item-title">设置年龄</p>
        <p
          class="form-item-content"
          :class="{active:ages.length > 0 }"
        >{{ages.length > 0 ? ages : '请正确设置您的年龄'}}</p>
        <img class="form-item-righticon" src="@/assets/images/sign_more.png" alt srcset />
      </div>
      <div class="form-item" @click.stop="tap2showSexModel">
        <p class="form-item-title">设置性别</p>
        <p
          class="form-item-content"
          :class="{active:sex.length > 0 }"
        >{{sex.length > 0 ? sex : '请选择您的真实性别'}}</p>
        <img class="form-item-righticon" src="@/assets/images/sign_more.png" alt srcset />
      </div>
      <div class="form-item">
        <p class="form-item-title">微信号</p>
        <input
          class="form-item-content active"
          type="text"
          placeholder="请正确填写您的真实微信号"
          v-model="wxCode"
          @input="wxCodeInput"
        />
      </div>
      <div class="form-item" @click.stop="tap2showBottomModel">
        <p class="form-item-title">设置职业</p>
        <p
          class="form-item-content"
          :class="{active:workPosition.occupationName }"
        >{{workPosition.occupationName? workPosition.occupationName : '我们将根据您的职业为您推荐广告'}}</p>
        <img class="form-item-righticon" src="@/assets/images/sign_more.png" alt srcset />
      </div>
      <div class="form-item" @click.stop="tap2showAreaModel">
        <p class="form-item-title">设置地区</p>
        <p
          class="form-item-content"
          :class="{active:area.length > 0 }"
        >{{area.length > 0 ? area : '请务必选择正确的地区'}}</p>
        <img class="form-item-righticon" src="@/assets/images/sign_more.png" alt srcset />
      </div>
    </div>
    <!-- 年龄弹窗  -->
    <modal-ages :isShowAgesModel.sync="isShowAgesModel" @onAgesConfirm="onAgesConfirm"></modal-ages>
    <!-- 性别弹窗  -->
    <modal-sex :isShowSexModel.sync="isShowSexModel" @onSexConfirm="onSexConfirm"></modal-sex>
    <!-- 省市 弹窗 -->
    <modal-area :isShowAreaModel.sync="isShowAreaModel" @onAreaConfirm="onAreaConfirm"></modal-area>
    <!-- 行业弹窗 -->
    <ModalBottom :ModalBottom.sync="ModalBottom" @ModalBottomClick="ModalBottomClick"></ModalBottom>
  </div>
</template>

<script>
import Vue from "vue";
import mixin from "@/utils/mixin";
import navHeader from "@/components/NavHeader";
import ModalBottom from "@/components/ModalBottom";
import ModalAges from "@/components/ModalAges";
import ModalSex from "@/components/ModalSex";
import ModalArea from "@/components/ModelArea"; 
import { Toast } from 'vant'; 
Vue.use(Toast);

export default {
  name: "infLogin",
  mixins: [mixin],
  components: {
    navHeader,
    ModalBottom,
    ModalAges,
    ModalSex,
    ModalArea
  },
  data() {
    return {
      avatarUrl: "", 
      nickName: "",

      ages: 0,
      isShowAgesModel: false,

      sex: "",
      isShowSexModel: false,
      
      wxCode:"",

      area: "",
      isShowAreaModel: false,

      workPosition: {},
      ModalBottom: {
        isModal: false,
        key: "levelName",
        data: []
      }
    };
  },
  mounted() { 
    //若广告主已登录并已完善信息，则做初始化
    this.init();
    this.initOccupation();
  },
  methods: {
    init(){
      let sto_uid =  window.localStorage.getItem("uniqueId");  
      if(!this.isNull(sto_uid)){
        this.$http.post("user/getUserInfo",{uniqueId:sto_uid}).then(
          res =>{
            let resData = res.data;
             this.avatarUrl = resData.avatarUrl ;
             this.nickName = resData.nickName ;
          },
          err =>{
            console.log(err)
          }
        )
      }
    },
    // 初始化 职业list
    initOccupation(){
      this.$http.post("occupation/getAllOccupationInfo",{}).then(
        res =>{
          let newOccupationInfo = [];
          res.data.forEach(element => {
            if(element.id>1){
              newOccupationInfo.push(element);
            }
          });
          this.ModalBottom.data = newOccupationInfo;
          this.ModalBottom.key = "occupationName"
        },
        err =>{
          console.log(err)
        }
      )
    },
    // 选择头像
    chooseAvatarUrl(){
      let parmas = {
        maxCount: 1,  //选择相册的最大数，若是相机拍照则只能为1
        sourceType: ['album', 'camera'], //相册 ，拍照，可选其一
        method:"avatarImg"
      }
      this.$bridge.callHandler('chooseImages',parmas,(res)=>{
        let imagesArr = res.split(",");
        this.avatarUrl = imagesArr[0]; 
      });
    },
    // 昵称限制
    nickNameInput() {
      let _nickName = this.nickName;
      if(_nickName.length >16){
        this.nickName = _nickName.substring(0,16);
      }
    },
    //   年龄
    tap2showAgeModel() {
      this.isShowAgesModel = true;
    },
    onAgesConfirm(value) {
      this.ages = value;
    },
    //   性别
    tap2showSexModel() {
      this.isShowSexModel = true;
    },

    // 微信号限制
    wxCodeInput() {
      let _wxCode = this.wxCode;
      if(_wxCode.length >30){
        this.wxCode = _wxCode.substring(0,30);
      }
    },
    onSexConfirm(value) {
      this.sex = value;
    },
    // 省市
    tap2showAreaModel() {
      this.isShowAreaModel = true;
    },
    onAreaConfirm(value) {
      this.area = value;
    },
    // 行业
    tap2showBottomModel() {
      console.log(this.ModalBottom)
      if(this.ModalBottom.data.length <=0){
        this.initOccupation();
      }
      this.ModalBottom.isModal = true;
    },
    ModalBottomClick(obj) {
      this.workPosition = obj;
      console.log(obj)
    },
    // 提交 完善资料
    tap2updateInfo() {  
      if (this.avatarUrl.length <= 0) {
        Toast.fail("请上传头像！");
        return false;
      }
      if (this.nickName.length <= 0) {
        Toast.fail("请输入昵称！");
        return false;
      }
      if (this.nickName.length > 16 ) {
        Toast.fail("昵称最长为16位！");
        return false;
      }
      if (this.ages <= 0) {
        Toast.fail("请设置年龄！");
        return false;
      }
      if (this.sex.length <= 0) {
        Toast.fail("请设置性别！");
        return false;
      }
      if (this.wxCode.length <= 0) {
        Toast.fail("请输入微信号！");
        return false;
      } 
      if(this.wxCode.length >30){
        Toast.fail("微信号最长为30位！");
        return false;
      }
      if(this.wxCode.length < 6){
        Toast.fail("微信号最短为6位！");
        return false;
      }
      if (!this.workPosition.occupationName) {
        Toast.fail("请设置职业！");
        return false;
      }
      if (this.area.length <= 0) {
        Toast.fail("请设置地区！");
        return false;
      }
      let sendData = {
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        nickName: this.nickName,
        avatarUrl: this.avatarUrl,
        age: parseInt(this.ages.split("岁")[0]),
        gender: this.sex=="男"?1:2, 
        wxNum:this.wxCode,
        occupationId: this.workPosition.id,
        area: this.area, 
      };
      this.$http.post("user/updatePerfectInfo",sendData).then(
        () => {
          Toast({
            type:"success",
            message:"完善资料成功！",
            onClose:()=>{
              this.$router.replace("/infIndex/index");
            }
          })
        },
        err=>{
          Toast.fail(err.head.msg)
          console.log(err)
        }
      )
    }
  }
};
</script>

<style scoped lang="scss">
.improve-info {
  width: 654px;
  margin: 0 auto 60px;
  .form-file {
    width: 180px;
    height: 180px;
    margin: 64px auto 16px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
    input {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .form-file-tips {
    width: 100%;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    line-height: 48px;
    padding-bottom: 20px;
    text-align: center;
  }
  .form-item {
    width: 100%;
    margin: 64px 0 0;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    border-bottom: 1px solid #ededed;
    position: relative;
    .form-item-content {
      width: 100%;
      height: 48px;
      line-height: 48px;
      outline: none;
      color: rgba(129, 129, 129, 1);
      margin: 24px 0 15px;
    }
    .active {
      color: rgba(48, 49, 51, 1);
    }
    .form-item-righticon {
      width: 30px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }
}
</style>